<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择视图</title>
    <style type="text/css">
		*{margin: 0;padding: 0;}
		body{
			text-align: center;
			background-color: #ecf0f1;
		}
		#main{
			position: relative;
			margin: 0 auto;
			width: 1400px;
			height: 1100px;
			background-image: url("../static/img/background.jpg");
			background-size: 100% auto;
		}
		#title{
			padding-top: 30px; 
			color: white;
			letter-spacing: 15px;
			font-weight: bolder;
			font-size: 30px;
		}

		.tuIcon{
			width: 100px;
			height: 100px;
		}
		#tUl li{
			color: white;
			font-size: 18px;
			font-weight: bold;
			margin: 66px;
			float: left;
			list-style: none;
			width: 100px;
			height: 100px;
			cursor: pointer;
		}
		#lines,#bars,#scatters,#pies,#radars,#maps{
			position: absolute;
			top: 300px;
			left: 200px;
			width: 1000px;
			height: 580px;
			border: 1px solid white;
			border-radius: 20px;
		}
		.input{
			width: 200px;
			height: 30px;
			text-align: center;
			border-radius: 10px;
		}
		#linesT,#barT,#scatterT,#pieT,#radarT,#mapT{
			margin: 30px auto;
			color: white;
		}
		#linesT tr,#barT tr,#scatterT tr,#pieT tr,#radarT tr,#mapT tr{
			height: 60px;
			line-height: 60px;
		}
		#linesT tr td,#barT tr td,#scatterT tr td,#pieT tr td,#radarT tr td,#mapT tr td{
			width: 300px;
			text-align: center;
		}
		#initLine,#initBar,#initSca,#initPie,#initRadar,#initMap{
			width: 200px;
			height: 50px;
			font-size: 25px;
			font-weight: bold;
			color: white;
			background-color: #447697;
			border-radius: 5px;
			margin-top: 30px;
			cursor: pointer;
		}
		#bars,#scatters,#pies,#radars,#maps{
			display: none;
		}

    </style>
</head>
<body>
	<div id="main">
	<h1 id="title">Select View</h1>
	<ul id="tUl">
		<li>
			<img src="../static/img/line.png" class="tuIcon" id="line">
			<span>折线图</span>
		</li>
		<li>
			<img src="../static/img/bar.png" class="tuIcon" id="bar">
			<span>柱状图</span>
		</li>
		<li>
			<img src="../static/img/scatter.png" class="tuIcon" id="scatter">
			<span>散点图</span>
		</li>
		<li>
			<img src="../static/img/pie.png" class="tuIcon" id="pie">
			<span>饼图</span>
		</li>
		<li>
			<img src="../static/img/radar.png" class="tuIcon" id="radar">
			<span>雷达图</span>
		</li>
		<li>
			<img src="../static/img/map.png" class="tuIcon" id="map">
			<span>地理图</span>
		</li>
	</ul>
	<div id="lines">
		<table id="linesT">
				<tr>
					<!-- 提示 -->
					<td colspan="2">
						<h1>折线图</h1>
					</td>
				</tr>
				<form action="/line" method="POST">
				<tr>
					<!-- 标题 -->
					<td>
						<input type="text" name="lineTitle" class="input" placeholder="标题" id="line_title" >
					</td>
					<td>
						<input type="text" name="lineSubtitle" class="input" placeholder="副标题" id="line_stitle">
					</td>
				</tr>
				<tr>
					<!-- 是否堆叠 -->
					<td>
						<span>不堆叠</span><input type="radio" name="lineStack" value="false" checked="true" class="radio">
					</td>
					<td>
						<span>堆叠</span><input type="radio" name="lineStack" value="true" class="radio">
					</td>
				</tr>
				<tr>
					<!-- 是否顺滑 -->
					<td>
						<span>曲折</span><input type="radio" name="lineSmooth" value="false"  checked="true" class="radio">
					</td>
					<td>
						<span>平滑</span><input type="radio" name="lineSmooth" value="true" class="radio">
					</td>
				</tr>
				<tr>
					<!-- 是否填充 -->
					<td>
						<span>不填充</span><input type="radio" name="lineAreaStyle" value="false"  checked="true" class="radio">
					</td>
					<td>
						<span>填充</span><input type="radio" name="lineAreaStyle" value="true" class="radio">
					</td>
				</tr>
				<tr>
					<!-- 是否显示值 -->
					<td>
						<span>不显拐点示值</span><input type="radio" name="lineLabel" value="false"  checked="true" class="radio">
					</td>
					<td>
						<span>显示拐点值</span><input type="radio" name="lineLabel" value="true" class="radio">
					</td>
				</tr>
				<tr>
					<!-- 触控后显示数据 -->
					<td>
						<span>触碰不显示数据</span><input type="radio" name="lineTrigger" value="false"  checked="true" class="radio">
					</td>
					<td>
						<span>触碰显示数据</span><input type="radio" name="lineTrigger" value="true" class="radio">
					</td>
				</tr>
				<tr>
					<!-- 提交 -->
					<td colspan="2">
						<button id="initLine">初始化</button>
					</td>
				</tr>
				</form>
		</table>
	</div>
	<div id="bars">
		<table id="barT">

			<tr>
				<!-- 提示 -->
				<td colspan="2">
					<h1>柱状图</h1>
				</td>
			</tr>
			<form action="/bar" method="POST">
			<tr>
				<!-- 标题 -->
				<td>
					<input type="text" name="barTitle" class="input" placeholder="标题">
				</td>
				<td>
					<input type="text" name="barSubtitle" class="input" placeholder="副标题">
				</td>
			</tr>
			<tr>
				<!-- 堆叠或并列 -->
				<td>
					<span>堆叠</span><input type="radio" name="barStack" value="false" checked="true" class="radio">
				</td>
				<td>
					<span>并列</span><input type="radio" name="barStack" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 横向或纵向 -->
				<td>
					<span>纵向</span><input type="radio" name="horORVer" value="false" checked="true" class="radio">
				</td>
				<td>
					<span>横向</span><input type="radio" name="horORVer" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 显示值 -->
				<td>
					<span>不显示值</span><input type="radio" name="showData" value="false" checked="true" class="radio">
				</td>
				<td>
					<span>显示值</span><input type="radio" name="showData" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 平均值 -->
				<td>
					<span>默认不显示</span><input type="radio" name="avg" value="false" checked="true" class="radio">
				</td>
				<td>
					<span>显示平均值</span><input type="radio" name="avg" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 触控后显示数据 -->
				<td>
					<span>触碰不显示数据</span><input type="radio" name="barTrigger" value="false"  checked="true" class="radio">
				</td>
				<td>
					<span>触碰显示数据</span><input type="radio" name="barTrigger" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 提交 -->
				<td colspan="2">
					<button id="initBar">初始化</button>
				</td>
			</tr>
			</form>
		</table>
	</div>
	<div id="scatters">
		<table id="scatterT">
			<tr>
				<!-- 提示 -->
				<td colspan="2">
					<h1>散点图</h1>
				</td>
			</tr>
			<form action="/scatter" method="POST">
			<tr>
				<!-- 标题 -->
				<td>
					<input type="text" name="scaTitle" class="input" placeholder="标题">
				</td>
				<td>
					<input type="text" name="scaSubtitle" class="input" placeholder="副标题">
				</td>
			</tr>
			<tr>
				<!-- 轴单位 -->
				<td>
					<input type="text" name="scaX" class="input" placeholder="X轴单位">
				</td>
				<td>
					<input type="text" name="scaY" class="input" placeholder="Y轴单位">
				</td>
			</tr>
			<tr>
				<!-- 触控后显示数据 -->
				<td>
					<span>触碰不显示数据</span><input type="radio" name="scaTrigger" value="false"  checked="true" class="radio">
				</td>
				<td>
					<span>触碰显示数据</span><input type="radio" name="scaTrigger" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 是否给数据加边框 -->
				<td>
					<span>不加边框</span><input type="radio" name="scaBorder" value="false"  checked="true" class="radio">
				</td>
				<td>
					<span>加边框</span><input type="radio" name="scaBorder" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 平均值 -->
				<td>
					<span>不显示平均值</span><input type="radio" name="scaAvg" value="false"  checked="true" class="radio">
				</td>
				<td>
					<span>显示平均值</span><input type="radio" name="scaAvg" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 最大最小值 -->
				<td>
					<span>不显示最大最小值</span><input type="radio" name="scaMM" value="false"  checked="true" class="radio">
				</td>
				<td>
					<span>显示最大最小值</span><input type="radio" name="scaMM" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 提交 -->
				<td colspan="2">
					<button id="initSca">初始化</button>
				</td>
			</tr>
			</form>
		</table>
	</div>
	<div id="pies">
		<table id="pieT">
			<tr>
				<!-- 提示 -->
				<td colspan="2">
					<h1>饼图</h1>
				</td>
			</tr>
			<form action="/pie" method="POST">
			<tr>
				<!-- 标题 -->
				<td>
					<input type="text" name="pieTitle" class="input" placeholder="标题">
				</td>
				<td>
					<input type="text" name="pieSubtitle" class="input" placeholder="副标题">
				</td>
			</tr>
			<tr>
				<!-- 实心或空心 -->
				<td>
					<span>圆形</span><input type="radio" name="pieRadius" value="false"  checked="true" class="radio">
				</td>
				<td>
					<span>环形</span><input type="radio" name="pieRadius" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 普通或南丁格尔玫瑰图 -->
				<td>
					<span>普通</span><input type="radio" name="pieSimple" value="false"  checked="true" class="radio">
				</td>
				<td>
					<span>玫瑰图</span><input type="radio" name="pieSimple" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 中心显示标签 -->
				<td>
					<span>中间不显示标签</span><input type="radio" name="pieCenter" value="false"  checked="true" class="radio">
				</td>
				<td>
					<span>中间显示标签</span><input type="radio" name="pieCenter" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 标签是否指向数据 -->
				<td>
					<span>标签不指向数据</span><input type="radio" name="pieLegend" value="false"  checked="true" class="radio">
				</td>
				<td>
					<span>标签指向数据</span><input type="radio" name="pieLegend" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 触控后显示数据 -->
				<td>
					<span>触碰不显示数据</span><input type="radio" name="pieTrigger" value="false"  checked="true" class="radio">
				</td>
				<td>
					<span>触碰显示数据</span><input type="radio" name="pieTrigger" value="true" class="radio">
				</td>
			</tr>
			<tr>
				<!-- 提交 -->
				<td colspan="2">
					<button id="initPie">初始化</button>
				</td>
			</tr>
			</form>
		</table>
	</div>
	<div id="radars">
		<table id="radarT">
			<tr>
				<!-- 提示 -->
				<td colspan="2">
					<h1>雷达图</h1>
				</td>
			</tr>
			<form action="/radar" method="POST">
			<tr>
				<!-- 标题 -->
				<td>
					<input type="text" name="radarTitle" class="input" placeholder="标题">
				</td>
				<td>
					<input type="text" name="radarSubtitle" class="input" placeholder="副标题">
				</td>
			</tr>
			<tr></tr>
			<tr>
				<!-- 圆形或多边形 -->
				<td>
					<span>多边形</span><input type="radio" name="radarRadius" value="false"  checked="true" class="radio">
				</td>
				<td>
					<span>圆形</span><input type="radio" name="radarRadius" value="true" class="radio">
				</td>
			</tr>
			<tr></tr>
			<tr>
				<!-- 是否填充 -->
				<td>
					<span>不填充</span><input type="radio" name="radarAreaStyle" value="false"  checked="true" class="radio">
				</td>
				<td>
					<span>填充</span><input type="radio" name="radarAreaStyle" value="true" class="radio">
				</td>
			</tr>
			<tr></tr>
			<tr>
				<!-- 提交 -->
				<td colspan="2">
					<button id="initRadar">初始化</button>
				</td>
			</tr>
			</form>
		</table>
	</div>
	<div id="maps">
		<table id="mapT">
			<tr>
				<!-- 提示 -->
				<td colspan="2">
					<h1>中国地理图</h1>
				</td>
			</tr>
			<form action="/china" method="POST">
			<tr></tr>
			<tr>
				<!-- 标题 -->
				<td>
					<input type="text" name="mapTitle" class="input" placeholder="标题">
				</td>
				<td>
					<input type="text" name="mapSubtitle" class="input" placeholder="副标题">
				</td>
			</tr>
			<tr></tr>
			<tr>
				<!-- 最大最小值 -->
				<td>
					<input type="number" name="mapMax" class="input" placeholder="最大值">
				</td>
				<td>
					<input type="text" name="mapDw" class="input" placeholder="数据单位">
				</td>
			</tr>
			<tr></tr>
			<tr>
				<!-- 提交 -->
				<td colspan="2">
					<button id="initMap">初始化</button>
				</td>
			</tr>
			</form>
		</table>
	</div>
	</div>

</body>
<script src="../static/js/jquery.js"></script>
<script type="text/javascript">
	$("#line").click(function(){
		$("#lines").show();
		$("#bars").hide();
		$("#scatters").hide();
		$("#pies").hide();
		$("#radars").hide();
		$("#maps").hide();
	});
	$("#bar").click(function(){
		$("#bars").show();
		$("#lines").hide();
		$("#scatters").hide();
		$("#pies").hide();
		$("#radars").hide();
		$("#maps").hide();
	}); 
	$("#scatter").click(function(){
		$("#bars").hide();
		$("#lines").hide();
		$("#scatters").show();
		$("#pies").hide();
		$("#radars").hide();
		$("#maps").hide();
	}); 
	$("#pie").click(function(){
		$("#bars").hide();
		$("#lines").hide();
		$("#scatters").hide();
		$("#pies").show();
		$("#radars").hide();
		$("#maps").hide();
	}); 
	$("#radar").click(function(){
		$("#bars").hide();
		$("#lines").hide();
		$("#scatters").hide();
		$("#pies").hide();
		$("#radars").show();
		$("#maps").hide();
	}); 
	$("#map").click(function(){
		$("#bars").hide();
		$("#lines").hide();
		$("#scatters").hide();
		$("#pies").hide();
		$("#radars").hide();
		$("#maps").show();
	}); 
</script>
</html>